<template>
  <div>
    <header-top></header-top>
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <h2>文章发布</h2>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="18">
        <!--文章标题-->
        <el-input
            placeholder="请输入标题"
            v-model="article.title"
            clearable
            >
        </el-input>
        <!--文章简介-->
        <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入简介"
            v-model="article.summary"
            clearable
            style="margin-top: 30px">
        </el-input>
        <!--文章分类-->
        <el-form ref="form" :model="form" style="margin-top: 30px">
          <div style="float: left;width: 300px">
            <el-form-item label="所属板块" >
              <el-select v-model="form.boardName" placeholder="请选择" @change="changeSelect">
                <el-option
                    v-for="(item,index) in boardOptions"
                    :key="index"
                    :label="item"
                    :value="item"
                />
              </el-select>
            </el-form-item>
          </div>
          <div style="float: left;width: 300px">
            <el-form-item label="文章分类">
              <el-select v-model="form.categoryId" placeholder="请选择分类">
                <el-option
                    v-for="(item,index) in categoryOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-form>


        <my-editor ref="myEditor" style="margin-top: 120px"></my-editor>
        <!--文章标签-->
        <div style="margin-top: 30px">
          给文章添加标签:&nbsp;&nbsp;
          <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
        </div>
        <el-button type="primary" style="margin:20px 0 60px 600px" @click="publishArticle(2)">发  布</el-button>
        <el-button type="primary" style="margin:20px 0 60px 60px" @click="publishArticle(0)">存草稿</el-button>

      </el-col>
    </el-row>
  </div>

</template>

<script>
import HeaderTop from "@/components/HeaderTop";
import myEditor from "@/components/MyEditor";
export default {
  name: "PublishArticle",
  components:{myEditor,HeaderTop},
  data(){
    return {
      dynamicTags: ['生活', '科技', '游戏'],
      inputVisible: false,
      inputValue: '',
      userId:'',
      article:{
        title:'',
        summary:'',
        authorId:this.userId,
        categoryId:'1',
        body:{
          contenthtml:'',
        },
        tags:[],
        status:2,
      },
      categoryList:[],
      boardOptions: [],
      boardList: {},
      categoryOptions: [],
      form: {
        boardName: '',
        categoryId: ''
      }
    }
  },
  methods:{
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue.length > 0 && inputValue.length < 10) {
        this.dynamicTags.push(inputValue);
      }else{
        this.$message.warning("标签不合规")
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    publishArticle(status){
      this.article.status = status;
      console.log(this.$refs.myEditor.getEditorHtml())
      this.article.categoryId = this.form.categoryId;
      this.article.body.contenthtml = this.$refs.myEditor.getEditorHtml();
      console.log(this.article)
      this.article.tags = this.dynamicTags;
      this.article.authorId = this.userId;
      let url = 'article/addArticle'
      this.$axios.post(url,this.article)
          .then(res=>{
              if(res.data.code == 200){
                  this.$message.success("文章发布成功");
              }
              this.$router.push('/personalCenter')
          })
    },
    getBoardAndCategoryList(){
        let url = 'board/getBoardAndCategory'
        this.$axios.get(url)
            .then(res=>{
                this.boardList = res.data.data;
                for(let b of this.boardList){
                  this.boardOptions.push(b.name)
                }
                console.log(this.boardList);
            })
    },
    getCate(){
      console.log('===='+this.form.categoryId)
    },
    changeSelect() {
      // 清空分类内容
      this.form.categoryId = ''

      // 遍历板块的下拉选项数组
      for (const k in this.boardOptions) {
        // 板块内容 是否等于 板块的下拉选择数组中的某一项
        if (this.form.boardName === this.boardOptions[k]) {
          for (let b of this.boardList){
            if(this.form.boardName == b.name){
              this.categoryOptions = b.categories;
            }
          }
        }
      }
    },
    getTag(){
      console.log(this.dynamicTags)
    }
  },

  created() {
    this.userId =  this.userId = JSON.parse(sessionStorage.getItem('userInfo')).id;
    console.log('---->'+this.userId)
    this.getBoardAndCategoryList();
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}


.article_title {
  height: 100px;
}
</style>